<template>
  <div class="tabbar">
    <router-link
      class="tabbarLink"
      tag="div"
      v-for="item of links"
      :to="{ name: item.name}"
      :key="item.name"
    >
      <mt-badge
        size="small"
        type="error"
        class="badge"
        v-if="item.name === 'cart'"
        v-show="allCount !== 0"
        >{{ allCount }}</mt-badge>
      <i v-html="item.icon"></i>
      <span class="text">{{ item.title }}</span>
    </router-link>
  </div>
</template>

<script>
import routes from '@/router/routes'
import { mapGetters } from 'vuex'

export default {
  name: 'Tabbar',
  data () {
    return {
      links: routes.filter(route => route.isNav === true)
    }
  },
  computed: {
    ...mapGetters(['allCount'])
  }
}
</script>

<style lang="scss" scoped>
  @font-face {
    font-family: 'iconfont';  /* project id 932152 */
    src: url('//at.alicdn.com/t/font_932152_gp39exu226l.eot');
    src: url('//at.alicdn.com/t/font_932152_gp39exu226l.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_932152_gp39exu226l.woff') format('woff'),
    url('//at.alicdn.com/t/font_932152_gp39exu226l.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_932152_gp39exu226l.svg#iconfont') format('svg');
  }
  .tabbar {
    height: 100%;
    display: flex;
    justify-content: space-around;
    .tabbarLink {
      position: relative;
      display: flex;
      padding: 0 20px;
      flex-direction: column;
      text-align: center;
      color: #9a7d56;
      justify-content: space-between;
      i {
        display: inline-block;
        font-size: 19px;
        font-weight: 600;
        height: 53.33%;
        line-height: 24px;
        font-family: 'iconfont';
      }
      .text {
        display: inline-block;
        font-size: 12px;
        height: 46.67%;
        line-height: 21px;
      }
      .badge {
        padding: 0;
        margin: 0;
        width: 20px;
        height: 20px;
        position: absolute;
        top: -8px;
        right: 18px;
        border-radius: 10px;
        line-height: 20px;
      }
    }
    .router-link-exact-active,
    .router-link-active {
      color: #0097eeec;
    }
  }
</style>
